<template>
  <div class="main-box">
    <div class="pro-info-box" v-if="dialogType === 1">
      <el-dialog
        title="项目基本信息"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div class="tage-box">
          <el-tag :type="tageObj['盘煤仪'] ? 'success' : 'info'">盘煤仪</el-tag>
          <el-tag :type="tageObj['无人值守'] ? 'success' : 'info'"
            >无人值守</el-tag
          >
          <el-tag :type="tageObj['数字化料场'] ? 'success' : 'info'"
            >数字化料场</el-tag
          >
          <el-tag :type="tageObj['气体检测'] ? 'success' : 'info'"
            >气体检测</el-tag
          >
          <el-tag :type="tageObj['红外检测'] ? 'success' : 'info'"
            >红外检测</el-tag
          >
        </div>
      </el-dialog>
    </div>
    <div class="contract-info-box" v-else-if="dialogType === 2">
      <el-dialog
        title="项目合同信息"
        :visible.sync="dialogVisible"
        width="28%"
        :before-close="handleClose"
      >
        <div class="contract-box">
          <div class="title-box">
            <div>签订人：</div>
            <div>合同金额：</div>
            <div>签定日期：</div>
            <div>已汇款金额：</div>
            <div>预计回款日期：</div>
          </div>
          <div class="info-box">
            <div>
              {{
                dialogData.contractname ? dialogData.contractname : "暂无数据"
              }}
            </div>
            <div>
              {{
                dialogData.contractmoney
                  ? `${dialogData.contractmoney}&ensp;元`
                  : "暂无数据"
              }}
            </div>
            <div>
              {{ dialogData.signtime ? dialogData.signtime : "暂无数据" }}
            </div>
            <div>
              {{
                dialogData.backmoney
                  ? `${dialogData.backmoney}&ensp;元`
                  : "暂无数据"
              }}
            </div>
            <div>
              {{
                dialogData.nextbackdate ? dialogData.nextbackdate : "暂无数据"
              }}
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <div class="team-info-box" v-else-if="dialogType === 3">
      <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <template slot="title">
          <div class="team-title-box">
            <div
              @click="switchTeamOrDuty(0)"
              :class="active === 0 ? 'active' : ''"
            >
              团队成员
            </div>
            <div
              @click="switchTeamOrDuty(1)"
              :class="active === 1 ? 'active' : ''"
            >
              在岗信息
            </div>
          </div>
        </template>
        <div v-show="active === 0" class="team-box">
          <div class="title-box">
            <div>销售：</div>
            <div>项目经理：</div>
            <div>研发成员：</div>
          </div>
          <div class="info-box">
            <div>{{ dialogData[0] }}</div>
            <div>{{ dialogData[1] }}</div>
            <div>{{ dialogData[2] }}</div>
          </div>
        </div>
        <div v-show="active === 1" class="duty-box">
          <div class="time-box" @click="openDayChoose">
            <div class="day-box">{{ dayArr[2] }}</div>
            <div class="year-box">{{ dayArr[0] }}-{{ dayArr[1] }}</div>
            <div style="display: none">
              <el-date-picker
                ref="dayChoose"
                v-model="dayData"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                @change="dayDataChange"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="title-box">
            <div>销售：</div>
            <div>项目经理：</div>
            <div>研发成员：</div>
          </div>
          <div class="info-box">
            <div>{{ dialogData[0] }}</div>
            <div>{{ dialogData[1] }}</div>
            <div>{{ dialogData[3] }}</div>
          </div>
        </div>
      </el-dialog>
    </div>
    <div class="milestone-info-box" v-else-if="dialogType === 4">
      <el-dialog
        title="里程碑"
        :visible.sync="dialogVisible"
        width="20%"
        :before-close="handleClose"
      >
        <div class="milestone-box">
          <div class="title-box">
            <div>售前调研</div>
            <div>电气实施</div>
            <div>产品设计</div>
            <div>研发</div>
            <div>联调</div>
            <div>等待验收</div>
            <div>已完成</div>
          </div>
          <div class="info-box">
            <div>：2023-01-30</div>
            <div>：2023-03-30</div>
            <div>：2023-05-30</div>
            <div>：2023-07-30</div>
            <div>：2023-09-30</div>
            <div>：2023-11-30</div>
            <div>：2023-12-30</div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getProjectInfoApi,
  getProjectContractApi,
  getProjectTeamApi,
  getProjectMilestonesApi,
  getProjectDutyApi,
} from "@/api/index";
export default {
  props: {
    dialogType: {
      type: Number,
      default: false,
    },
    // selectProCode: {
    //   type: String,
    //   default: false,
    // },
  },
  data() {
    return {
      // 控制弹框显隐
      dialogVisible: true,
      // 基本信息高亮与否
      tageObj: {
        盘煤仪: false,
        无人值守: false,
        数字化料场: false,
        气体检测: false,
        红外检测: false,
      },
      // 控制团队高亮或在岗高亮
      active: 0,
      // 选取的日期
      dayData: null,
      // 展示的日期
      dayArr: [],
      // 弹框展示的信息
      dialogData: [],
      // 当前的项目编号
      selectProCode: null,
    };
  },
  methods: {
    handleClose(done) {
      //   this.$confirm("确认关闭？")
      //     .then((_) => {
      //       done();
      //     })
      //     .catch((_) => {});
      done();
    },

    // 根据dialogType进行对应的网络请求获取数据
    async getShowData(num, proCode) {
      this.selectProCode = proCode;
      let data = {
        procode: this.selectProCode,
      };
      switch (num) {
        case 1:
          this.getProjectInfo(data);
          break;
        case 2:
          this.getProjectContract(data);
          break;
        case 3:
          this.getDefautTeam(data);
          break;
        case 4:
          this.getProjectMilestones(data);
          break;
      }
    },

    // 获取当前项目的基本情况
    async getProjectInfo(data) {
      let infoRes = await getProjectInfoApi(data);
      if (infoRes.length) {
        infoRes.forEach((item) => {
          this.tageObj[item.fuctionname] = true;
        });
      }
      console.log("选中项的团队数据---->", infoRes);
    },

    // 获取当前项目的合同信息
    async getProjectContract(data) {
      let contractRes = await getProjectContractApi(data);
      if (contractRes.length) {
        this.dialogData = contractRes[0];
        this.dialogData.signtime = this.fixTime(contractRes[0].signtime);
        this.dialogData.nextbackdate = this.fixTime(
          contractRes[0].nextbackdate
        );
      } else {
        this.dialogData = [];
      }
    },

    // 切换团队成员与在岗成员
    async switchTeamOrDuty(num) {
      this.active = num;
      let data = {
        procode: this.selectProCode,
      };
      if (num) {
        this.getDutyTeam(data);
      } else {
        this.getDefautTeam(data);
      }
    },

    // 获取默认在岗人员
    async getDefautTeam(data) {
      let res = await getProjectTeamApi(data);
      let arr = res.split("\n");
      this.dialogData = this.fixTeamName(arr);
    },

    // 获取当日在岗人员
    async getDutyTeam(data) {
      data.dutydate =
        this.dayArr[0] + "-" + this.dayArr[1] + "-" + this.dayArr[2];
      console.log("选取的时间----->", this.dayArr, data);
      let res = await getProjectDutyApi(data);
      let arr = res.split("\n");
      this.dialogData = this.fixTeamName(arr);
      console.log("选取的时间----->", this.dialogData);
    },

    // 处理成员名称信息
    fixTeamName(arr) {
      arr = arr.map((item) => {
        let arr = item.split(":");
        let name = arr[1];
        return name;
      });
      return arr;
    },

    // 获取当前项目的里程碑信息
    async getProjectMilestones(data) {
      let milestoneRes = await getProjectMilestonesApi(data);
      console.log("选中项的里程碑数据---->", milestoneRes);
    },

    // 打开日期选择器
    openDayChoose() {
      this.$refs.dayChoose.handleClickIcon();
    },

    // 选择的日期变化
    dayDataChange(day) {
      this.dayArr = day.split("-");
      let data = {
        procode: this.selectProCode,
      };
      this.getDutyTeam(data);
    },

    // 初始化当前日期
    initDay() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (year < 10) {
        year = "0" + year;
      }
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      this.dayArr = [year, month, day];
    },

    // 处理时间
    fixTime(str) {
      let arr = str.split("-");
      let str1 = arr[2].slice(0, 2);
      return arr[0] + "-" + arr[1] + "-" + str1;
    },
  },
  mounted() {
    this.initDay();
    // this.getShowData();
  },
};
</script>

<style lang="scss" >
.el-tag {
  width: 30%;
  height: 30px;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  margin: 5px 5px;
}

.pro-info-box {
  .tage-box {
    border-top: 1px solid #f0f0f0;
  }
}

.contract-info-box {
  /* width: 100px; */
  .contract-box {
    /* border: 1px solid red; */
    padding-left: 20px;
    display: flex;

    .title-box {
      /* border: 1px solid blue; */
      border-top: 1px solid #f0f0f0;
      width: 45%;

      > div {
        /* border: 1px solid green; */
        height: 32px;
        font-size: 20px;

        text-align: justify;
        line-height: 32px;
      }

      > div:after {
        content: "";
        width: 100%;
        display: inline-block;
        height: 0;
      }
    }

    .info-box {
      /* border: 1px solid green; */
      border-top: 1px solid #f0f0f0;
      width: 59%;

      > div {
        height: 32px;
        font-size: 20px;
        font-weight: 500;
        color: black;
        text-align: start;
        line-height: 32px;
      }
    }
  }
}

.team-info-box {
  .team-title-box {
    /* border: 1px solid red; */
    display: flex;

    > div {
      /* border: 1px solid green; */
      height: 32px;
      width: 20%;
      line-height: 32px;
      text-align: center;
      color: #7a828e;
      font-size: 17px;
      font-weight: 600;
    }

    > div:hover {
      cursor: pointer;
    }

    .active {
      color: #109b60;
    }
  }

  .team-box {
    padding-left: 20px;
    display: flex;

    .title-box {
      width: 25%;
      border-top: 1px solid #f0f0f0;

      > div {
        height: 32px;
        font-size: 16px;

        text-align: justify;
        line-height: 32px;
      }

      > div:after {
        content: "";
        width: 100%;
        display: inline-block;
        height: 0;
      }
    }

    .info-box {
      /* border: 1px solid green; */
      border-top: 1px solid #f0f0f0;
      width: 74%;

      > div {
        height: 32px;
        font-size: 16px;
        font-weight: 500;
        color: black;
        text-align: start;
        line-height: 32px;
      }
    }
    .info-box:last-child {
      margin-bottom: 15px;
    }
  }

  .duty-box {
    padding-left: 20px;
    display: flex;

    .time-box {
      /* border: 1px solid green; */
      width: 22%;
      /* padding-right: 2%; */
      border-top: 1px solid #f0f0f0;
      border-right: 1px solid #f0f0f0;

      .day-box {
        /* border: 1px solid red; */
        height: 50%;
        width: 100%;
        /* margin: 0 auto; */
        font-size: 50px;
        /* text-align: center; */
        /* line-height: 120%; */
        color: #109b60;
      }

      .year-box {
        /* border: 1px solid blue; */
        height: 40%;
        width: 100%;
        /* margin: 0 auto; */
        font-size: 18px;
        /* text-align: center; */
      }
    }

    .time-box:hover {
      cursor: pointer;
    }

    .title-box {
      width: 20%;
      border-top: 1px solid #f0f0f0;
      padding-left: 3%;

      > div {
        height: 32px;
        font-size: 12px;

        text-align: justify;
        line-height: 32px;
      }

      > div:after {
        content: "";
        width: 100%;
        display: inline-block;
        height: 0;
      }
    }

    .info-box {
      /* border: 1px solid green; */
      border-top: 1px solid #f0f0f0;
      width: 55%;

      > div {
        height: 32px;
        font-size: 12px;
        font-weight: 500;
        color: black;
        text-align: start;
        line-height: 32px;
      }
    }
    .info-box:last-child {
      margin-bottom: 15px;
    }
  }
}

.milestone-info-box {
  .milestone-box {
    /* border: 1px solid red; */
    width: 100%;
    padding-left: 20px;
    display: flex;

    .title-box {
      /* border: 1px solid blue; */
      border-top: 1px solid #f0f0f0;
      width: 40%;

      > div {
        /* border: 1px solid green; */
        height: 32px;
        font-size: 20px;

        text-align: justify;
        line-height: 32px;
      }

      > div:after {
        content: "";
        width: 100%;
        display: inline-block;
        height: 0;
      }
    }

    .info-box {
      /* border: 1px solid green; */
      border-top: 1px solid #f0f0f0;
      width: 59%;

      > div {
        height: 32px;
        font-size: 20px;
        font-weight: 500;
        color: black;
        text-align: start;
        line-height: 32px;
      }
    }
  }
}

.el-dialog {
  .el-dialog__body {
    padding: 5px 30px 20px 20px;
  }
}

.el-picker-panel {
  left: 150px !important;
}
</style>